<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>按钮初始化-JavaScript-WSCORE</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<ol>
			<li><a href="../../index.html">首页</a></li>
			<li>按钮初始化</li>
		</ol>
	</div>
	<fieldset>
		<legend>按钮初始化</legend>
		文档Document载入完毕后，
		对文档中的按钮初始化；
		<div class="code example">
			<i>jQuery</i> ( <u>selector</u> ) . <b>wscbase_button</b> ()
		</div>
		<div class="param">
			<strong>selector</strong><br />
			类型：jQuery-Object<br />
			描述：初始化 selector 中的表单			
			<div class="example"><pre>
//#1 全项初始化
<i>jQuery</i> ( '<u>#example</u>' ) . <b>wscbase</b> ()

//#2 仅按钮初始化
<i>jQuery</i> ( '<u>#example</u>' ) . <b>wscbase_button</b> ()</pre></div>
		</div>
	</fieldset>


	<fieldset>
		<legend>支持属性</legend>
		按钮自动初始化时，可支持下列属性格式格式化
		<div class="br"></div>
		<table>
			<thead>
				<tr>
					<th>属性名</th>
					<th>属性值</th>
					<th>说明</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>		
				<tr>
					<td>data-event</td>
					<td>string</td>
					<td>
						按钮事件<br />
						支持：checkbox、radio
					</td>
					<td>
						<button data-event="radio">Radio1</button>
						<button data-event="radio">Radio2</button>
						<button data-event="radio">Radio3</button>
					</td>
				</tr>
				<tr>
					<td>data-event-for</td>
					<td>selector</td>
					<td>
						事件关联<br />
						说明：当事件触发时被关联元素显示或隐藏
					</td>
					<td>
						<button data-event data-event-for="#example">click</button>
						<div id="example" style="display:none">Example</div>
					</td>
				</tr>
				<tr>
					<td>data-checked</td>
					<td>boolean</td>
					<td>
						已选状态<br />
						默认：false<br />
						支持：false、true
					</td>
					<td>
						<button data-checked="true">click</button>
					</td>
				</tr>
				<tr>
					<td>data-no-ui</td>
					<td>boolean</td>
					<td>
						是否禁用UI(手动UI)<br />
						支持：true、false<br />
						默认：false<br />
						注意：当设置data-no-ui="true"时, 需手工编写UI结构与样式
					</td>
					<td>
						<button data-no-ui="true" class="wsc-btn a inline">
							<div class="wsc-btn-inner">
								<span class="wsc-btn-icon wsc-btn-icon-home inline"></span>
								<span class="wsc-btn-text inline">默认</span>
							</div>
						</button>
						
						<a button data-icon="home" href="#button">Button!</a>
						
					</td>
				</tr>
				<tr>
					<td>data-class</td>
					<td>string</td>
					<td colspan="2">
						按钮样式<br />
						格式：样式名<br />
						默认：inline(行内块)
					</td>
				</tr>
				<tr>
					<td>data-theme</td>
					<td>[a-z]</td>
					<td>按钮样式<br />支持：a-z任一字符<br />默认：a, 即a样式data-theme="a"</td>
					<td>
						<button data-icon="search" data-theme="a">A样式</button>
						<button data-icon="home" data-theme="b">B样式</button>
					</td>
				</tr>
				<tr>
					<td>data-icon</td>
					<td>string</td>
					<td>
						按钮图标<br />
						格式：图标名称<br />
						支持：home、search等
					</td>
					<td>
						<button data-icon="home">默认</button>
					</td>
				</tr>
				<tr>
					<td>data-no-text</td>
					<td>boolean</td>
					<td>
						隐藏文本<br />
						支持：true、false<br />
						默认：false
					</td>
					<td>
						<button data-icon="home" data-no-text="true">隐藏文本</button>
					</td>
				</tr>
				<tr>
					<td>data-icon-checked</td>
					<td>string</td>
					<td>
						交替图标<br />
						格式：图标名称<br />
						支持：同data-icon属性
					</td>
					<td>
						<button data-icon="down" data-icon-checked="up">点击交替图标</button>
					</td>
				</tr>
				<tr>
					<td>data-icon-pos</td>
					<td>[l|r]</td>
					<td>
						按钮位置<br />
						默认：l, 即Left<br />
						支持：l、r
					</td>
					<td>
						<button data-icon="home" data-icon-pos="r">右图标</button>
					</td>
				</tr>
				<tr>
					<td>data-value</td>
					<td>string</td>
					<td colspan="2">
						按钮值<br />
						格式：任意、类似input元素的value属性<br />
						提示：一般在AJAX请求中使用
					</td>
				</tr>
				


			</tbody>
		</table>
	</fieldset>
</body>
</html>